<script setup>
import {listOrderInfo,getOrderDetail} from "../../../api/order/orderInfo.js"
const {proxy} =getCurrentInstance();
const orderList=ref([]);
const loading=ref(true);
const showSearch=ref(true);
const ids=ref([]);
const multiple = ref(true);
const total=ref(0);
const detailsOrNot=ref(false);
const orderInfoDetails=ref({});
const data=reactive({
  queryParams:{
    pageNum: 1,
    pageSize: 10,
    orderNo:null,
    status:null,

  },

});
const {queryParams} =toRefs(data);

const formatStatus = (status) => {
  const statusMap = {
    '0': '充电中',
    '2': '已完成'
  };
  return statusMap[status] ?? '未知状态';
};

/** 查询订单列表 */
function getList(){
  loading.value = true;
  listOrderInfo(queryParams.value).then(response => {
    orderList.value=response.rows;
    total.value=response.total;
    loading.value = false;
  });
}

function search() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 导出 */
function exportData(){
  proxy.download('/order/orderInfo/export',{
    ...queryParams.value
  }, `orderInfo_${new Date().getTime()}.xlsx`)
}

function viewDetail(row){
  detailsOrNot.value=true
  orderInfoDetails.value=row
  getOrderDetail(row.id).then(response => {
    const detailData = response.data; // 假设后端返回结构是 { data: { ... } }

    // 将接口返回的详细数据赋值给 orderInfoDetails
    orderInfoDetails.value = {
      ...orderInfoDetails.value, // 保留原有字段
      ...detailData // 覆盖/补充新的详细字段
    };
  });


}

getList();



</script>

<template>
  <div class="app-container">
    <!-- 搜索栏部分 -->
    <!-- 搜索栏部分 -->
    <el-form :inline="true" v-show="showSearch" ref="queryRef" :model="queryParams" label-width="68px">
      <el-form-item label="订单号" prop="orderNo">
        <el-input
            placeholder="请输入订单号"
            v-model="queryParams.orderNo"
            clearable
            @keyup.enter="search"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="订单状态">
          <el-option label="充电中" value="0"></el-option>
          <el-option label="已结束" value="2"></el-option>
          <!-- 可根据实际情况添加更多状态 -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="search">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
      <!-- 将导出按钮放入一个表单项中，并保证它与其它按钮在同一行 -->
      <el-form-item>
        <el-button v-hasPermi="['order:orderInfo:export']"
                   icon="Download" plain
                   type="success"
                   @click="exportData" class="export">导出</el-button>
      </el-form-item>
    </el-form>
    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>

    <!-- 订单列表部分 -->
    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" border>
      <el-table-column align="center" type="selection" width="35"/>
      <el-table-column prop="orderNo" label="订单号"></el-table-column>
      <el-table-column prop="userId" label="用户"></el-table-column>
      <el-table-column prop="startTime" label="借用开始时间"></el-table-column>
      <el-table-column prop="startStationName" label="借用地点名称"></el-table-column>
      <el-table-column prop="endTime" label="归还时间"></el-table-column>
      <el-table-column prop="endStationName" label="归还地点名称"></el-table-column>
      <el-table-column prop="duration" label="借用时长(分钟)"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额(元)"></el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template #default="scope">
          <span>{{ scope.row.status === 2 ? '充电中' : '已结束' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <pagination
        v-show="total>0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <div>
      <el-dialog title="订单详情信息" width="50%"  v-model="detailsOrNot">
        <el-descriptions title="订单信息">
          <el-descriptions-item label="订单号">{{orderInfoDetails.orderNo}}</el-descriptions-item>
          <el-descriptions-item label="用户id">{{orderInfoDetails.id}}</el-descriptions-item>
          <el-descriptions-item label="设备编号">{{orderInfoDetails.powerBankNo}}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{orderInfoDetails.startTime}}</el-descriptions-item>
          <el-descriptions-item label="起始站编号">{{orderInfoDetails.startStationId}}</el-descriptions-item>
          <el-descriptions-item label="起始地点">{{orderInfoDetails.startStationName}}</el-descriptions-item>
          <el-descriptions-item label="起始柜编号">{{orderInfoDetails.startCabinetNo}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{orderInfoDetails.endTime}}</el-descriptions-item>
          <el-descriptions-item label="终点站编号">{{orderInfoDetails.endStationId}}</el-descriptions-item>
          <el-descriptions-item label="终点站地点">{{orderInfoDetails.endStationName}}</el-descriptions-item>
          <el-descriptions-item label="终点柜编号">{{orderInfoDetails.endCabinetNo}}</el-descriptions-item>
          <el-descriptions-item label="使用时间(分钟)">{{orderInfoDetails.duration}}</el-descriptions-item>
          <el-descriptions-item label="使用规则">{{orderInfoDetails.feeRule}}</el-descriptions-item>
          <el-descriptions-item label="总额">{{orderInfoDetails.totalAmount}}</el-descriptions-item>
          <el-descriptions-item label="扣除金额">{{orderInfoDetails.deductAmount}}</el-descriptions-item>
          <el-descriptions-item label="真实账单">{{orderInfoDetails.realAmount}}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="orderInfoDetails.status === '0' ? 'primary' : 'success'">
              {{ formatStatus(orderInfoDetails.status) }}
            </el-tag>
          </el-descriptions-item>

        </el-descriptions>


      </el-dialog>
    </div>
  </div>

</template>

<style scoped lang="scss">
.search-form {
    margin-bottom: 15px;}

</style>
